<template>
  <div class="order-list">
    <!-- 搜索栏 -->
    <el-card class="search-card mb-4">
      <el-form :model="searchForm" inline>
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderId" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="searchForm.receiver" placeholder="请输入收货人" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.contact" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderState" placeholder="请选择状态" clearable>
            <el-option label="待付款" :value="1" />
            <el-option label="待发货" :value="2" />
            <el-option label="已发货" :value="3" />
            <el-option label="已完成" :value="4" />
            <el-option label="已取消" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单列表 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单列表</span>
          <el-button type="danger" :disabled="!selectedOrders.length" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </div>
      </template>

      <el-table
        :data="orderList"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="订单号" width="180" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="orderState" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getOrderStateType(row.orderState)">
              {{ getOrderStateText(row.orderState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalPayPrice" label="支付金额" width="120">
          <template #default="{ row }"> ¥{{ row.totalPayPrice.toFixed(2) }} </template>
        </el-table-column>
        <el-table-column prop="goodsCount" label="商品数量" width="100" />
        <el-table-column prop="payType" label="支付方式" width="100">
          <template #default="{ row }">
            {{ getPayTypeText(row.payType) }}
          </template>
        </el-table-column>
        <el-table-column label="收货信息" min-width="300">
          <template #default="{ row }">
            <p>收货人：{{ row.receiver }}</p>
            <p>联系电话：{{ row.contact }}</p>
            <p>收货地址：{{ row.address }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>

            <el-popconfirm title="确认删除该订单吗？" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button v-if="row.orderState === 1" type="success" link @click="handleShip(row)"
              >立即发货</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span>共 {{ total }} 条</span>
        <el-select v-model="pageSize" class="mx-2" @change="handleSizeChange">
          <el-option
            v-for="item in [15, 30, 50, 100]"
            :key="item"
            :label="`${item}条/页`"
            :value="item"
          />
        </el-select>
        <el-pagination
          v-model:current-page="currentPage"
          :total="total"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" v-model="dialogVisible" width="700px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ currentOrder?.id }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentOrder?.createTime }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getOrderStateType(currentOrder?.orderState)">
            {{ getOrderStateText(currentOrder?.orderState) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{ getPayTypeText(currentOrder?.payType) }}
        </el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ currentOrder?.goodsCount }}</el-descriptions-item>
        <el-descriptions-item label="支付金额"
          >¥{{ currentOrder?.totalPayPrice }}</el-descriptions-item
        >
        <el-descriptions-item label="收货人">{{ currentOrder?.receiver }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder?.contact }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{
          currentOrder?.address
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = ref({
  orderId: '',
  receiver: '',
  contact: '',
  orderState: ''
})

// 表格数据
const loading = ref(false)
const orderList = ref([])
const selectedOrders = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 订单详情
const dialogVisible = ref(false)
const currentOrder = ref(null)

// 获取订单列表
const getOrderList = async () => {
  loading.value = true
  try {
    // 模拟数据，包含所有五种状态的订单
    orderList.value = [
      {
        id: '1875017227279765501',
        goodsCount: 2,
        totalPrice: 299.0,
        totalPayPrice: 299.0,
        createTime: '2025-01-03 10:11:57.0',
        payType: 1,
        orderState: 1, // 待付款
        payChannel: 1,
        receiver: '王五',
        contact: '13866668888',
        address: 'aaa街aaa路'
      },
      {
        id: '1875017227279765502',
        goodsCount: 5,
        totalPrice: 99.0,
        totalPayPrice: 99.0,
        createTime: '2025-01-03 11:30:57.0',
        payType: 2,
        orderState: 2, // 待发货
        payChannel: 2,
        receiver: '小王',
        contact: '13911112222',
        address: 'bbb街bbb路'
      },
      {
        id: '1875017227279765503',
        goodsCount: 1,
        totalPrice: 158.0,
        totalPayPrice: 158.0,
        createTime: '2025-01-03 12:20:57.0',
        payType: 1,
        orderState: 3, // 已发货
        payChannel: 1,
        receiver: '李四',
        contact: '13977779999',
        address: 'ccc街ccc路'
      },
      {
        id: '1875017227279765504',
        goodsCount: 10,
        totalPrice: 189.0,
        totalPayPrice: 189.0,
        createTime: '2025-01-03 13:11:57.0',
        payType: 1,
        orderState: 4, // 已完成
        payChannel: 1,
        receiver: '老李',
        contact: '13900002020',
        address: 'ddd街ddd路'
      },
      {
        id: '1875017227279765505',
        goodsCount: 3,
        totalPrice: 299.0,
        totalPayPrice: 299.0,
        createTime: '2025-01-03 14:20:57.0',
        payType: 1,
        orderState: 5, // 已取消
        payChannel: 1,
        receiver: '张三',
        contact: '13933334444',
        address: 'eee街eee路'
      }
    ]
    total.value = 5
  } catch (error) {
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 订单状态处理
const getOrderStateText = (state) => {
  const stateMap = {
    1: '待付款',
    2: '待发货',
    3: '已发货',
    4: '已完成',
    5: '已取消'
  }
  return stateMap[state] || '未知状态'
}

const getOrderStateType = (state) => {
  const typeMap = {
    1: 'danger',
    2: 'warning',
    3: 'primary',
    4: 'success',
    5: 'info'
  }
  return typeMap[state] || ''
}

// 支付方式处理
const getPayTypeText = (type) => {
  const typeMap = {
    1: '微信支付',
    2: '支付宝',
    3: '银行卡'
  }
  return typeMap[type] || '其他'
}

// 搜索和重置
const handleSearch = () => {
  currentPage.value = 1
  getOrderList()
}

const resetSearch = () => {
  searchForm.value = {
    orderId: '',
    receiver: '',
    contact: '',
    orderState: ''
  }
  handleSearch()
}

// 查看详情
const handleDetail = (row) => {
  currentOrder.value = row
  dialogVisible.value = true
}

// 批量操作相关
const handleSelectionChange = (val) => {
  selectedOrders.value = val
}

const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm('确认删除选中的订单吗？', '提示', {
      type: 'warning'
    })
    ElMessage.success('批量删除成功')
    getOrderList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败')
    }
  }
}

// 删除订单
const handleDelete = async (row) => {
  try {
    ElMessage.success('删除成功')
    getOrderList()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}

// 发货处理
const handleShip = async (row) => {
  row.orderState = 3
  ElMessage.success('发货成功')
}

// 分页相关
const handleSizeChange = (val) => {
  pageSize.value = val
  getOrderList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getOrderList()
}

onMounted(() => {
  getOrderList()
})
</script>

<style scoped>
.order-list {
  padding: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* 调整选择器宽度 */
.pagination-container .el-select {
  width: 100px;
}

/* 调整分页器样式 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #fd715d;
}
</style>
